<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
	  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
	    <el-select v-model="value" placeholder="请选择">
	      <el-option
	        v-for="item in options"
	        :key="item.value"
	        :label="item.label"
	        :value="item.value">
	      </el-option>
	    </el-select>
		 <el-button type="primary" @click='login'>主要按钮</el-button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
   data() {
       return {
         num: 1,
		  options: [{
		           value: '选项1',
		           label: '黄金糕'
		         }, {
		           value: '选项2',
		           label: '双皮奶'
		         }, {
		           value: '选项3',
		           label: '蚵仔煎'
		         }, {
		           value: '选项4',
		           label: '龙须面'
		         }, {
		           value: '选项5',
		           label: '北京烤鸭'
		         }],
		  value: ''
       };
     },
	 
     methods: {
		 login(){
			 this.$http.get('http://localhost:8080/db.json')
			   .then((response) => {
			     console.log(response.data);
			   })
			   .catch((error) =>{
			     console.log(error);
			   })

		 },
       handleChange(value) {
         console.log(value);
       }
     },
  components: {
    HelloWorld
  }
}
</script>
<style>
	.el-select-dropdown.el-popper{
		top: 153px!important;
	}
</style>
